<template>
  <div>

    <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-between search-form">
        <div class="flex-grow-1">
          <el-select class="w200px mr-3" v-model="queryForm.status" placeholder="任务状态" autocomplete="off" clearable>
            <el-option label="停用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
          <el-input class="w200px mr-3" v-model="queryForm.taskName" placeholder="请输入任务名称" clearable></el-input>
          <el-button type="primary" plain @click="onRefresh()">查询</el-button>
        </div>
        <div class="d-flex">
          <el-button type="primary" @click="onAdd()">添加</el-button>

        </div>
      </div>
    </div>

    <div class="app_card pt-4  pb-5">
      <el-table v-loading="loading" element-loading-text="查询中..." stripe size="large" :data="dataOfTable"
        height="calc(100vh - 300px)" sortable="custom" @sort-change="handleSortChange"
        @selection-change="handleSelectionChange">
        <el-table-column label="任务名称" prop="taskName" align="center">
          <template #default="scope">{{ scope.row.taskName }}</template>
        </el-table-column>
        <el-table-column label="任务指令" prop="taskInstructions" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{ scope.row.taskInstructions == '1' ? '一键上课' : '一键下课' }} </template>
        </el-table-column>

        <el-table-column label="任务描述" prop="description" align="center">
          <template #default="scope">{{ scope.row.description }}</template>
        </el-table-column>
        <el-table-column label="任务时间" prop="taskCycle" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.taskCycle }}</template>
        </el-table-column>
        <el-table-column label="教室数量" prop="target" align="center" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.target.split(",").length }}</template>
        </el-table-column>
        <el-table-column label="任务状态" prop="status" align="center" show-overflow-tooltip>
          <template #default="scope">
            <el-switch size="large" disabled v-model="scope.row.status" inline-prompt active-value="1" inactive-value="0"
              active-text="启用" inactive-text="停用" />
          </template>
        </el-table-column>
        <el-table-column label="最后一次执行时间" prop="updatedTime" align="center" show-overflow-tooltip>
          <template #default="scope">
            {{ resetForm('YYYY-mm-dd HH:MM', scope.row.updatedTime) }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="220" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="onEditRow(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="onTasklogRow(scope.row)">日志</el-button>
            <!-- <el-button link type="danger" @click="onDeleteRow(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <Pagination ref="paginationRef" @handleChange="handleChange" />
    </div>

    <div>
    </div>
    <EditDialog ref="editDialogRef" @success="loadData()"></EditDialog>
    <TasklogDialog ref="tasklogDialogRef" @success="loadData()"></TasklogDialog>
  </div>
</template>

<script setup>
/**
 * 教室管理
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';
import { resetForm } from '@/utils/EsDate.js';

//组件
import Pagination from '@/components/pagination/index.vue';
import EditDialog from './EditDialog.vue';
import TasklogDialog from './TasklogDialog.vue';

// ======================================================
//                      变量声明
// ======================================================





const authStore = useAuthStore();
const loading = ref(false);
// 表格查询参数
const queryForm = ref({
  status: "",
  taskName: ""
})
// 表格查询参数
const queryParam = ref({
  sort: "Id",
  order: "asc",
  page: 1,
  limit: 10
})
// 组件引用
const paginationRef = ref(null);
const editDialogRef = ref(null);
const tasklogDialogRef = ref(null);

// 表格数据
const dataOfTable = ref([]);

// 教室分组数据
const dataOfGroups = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label',
}
//1大图 2小图
const radioFloor = ref('-1');
const radioIcon = ref('1');
const col12 = ref(12);
const col8 = ref(8);

// ======================================================
//                      点击操作
// ======================================================

// 点击刷新按钮
const onRefresh = () => {
  loadData();
}

// 点击新增按钮
const onAdd = (row = null) => {
  if (row) {
    editDialogRef.value.show(0, "添加" + row.title, row);
    return;
  }
  editDialogRef.value.show(0, "添加任务管理");
}


// 点击批量删除按钮
const onDeleteMulti = () => {
  let n = multipleSelection.value.length, id = multipleSelection.value.map(v => v.id).toString();
  ElMessageBox.confirm("确定要删除 " + n + " 条记录吗？", "警告").then(() => {
    EsAjax.delete(ApiUrls.articleCategoryDelete, { param: { id } }).then(res => {
      if (res.data.code != 200) {
        ElMessage.warning(res.data.data + res.data.msg);
        return;
      }
      ElMessage.success("删除成功");
      loadData();
    }).catch(err => {
      ElMessage.error("网络错误：" + err.message);
    })
  }).catch(() => { })
}



// 点击行内编辑按钮
const onEditRow = (row) => {
  editDialogRef.value.show(row.id, "编辑任务" + row.taskName, row);
}
// 点击行内编辑按钮
const onTasklogRow = (row) => {
  tasklogDialogRef.value.show(row.id, row.taskName + "的日志");
}

// 点击行内删除按钮
const onDeleteRow = (row) => {
  ElMessageBox.confirm("确定要删除该记录吗？", "警告").then(() => {
    EsAjax.delete(ApiUrls.articleCategoryDelete, { params: { id: row.id } })
      .then(res => {
        if (res.data.code != 200) {
          ElMessage.warning(res.data.data + res.data.msg);
          return;
        }
        loadData();
      })
      .catch(err => { ElMessage.error("网络错误：", err.message) });
  }).catch(() => { });
  console.log(row)
}

// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData();
}


// ======================================================
//                      处理事件
// ======================================================
const loadData = () => {
  let _queryParam = queryParam.value
  _queryParam.query = ''
  if (`${queryForm.value.status}`) {
    _queryParam.query = "status=" + queryForm.value.status;
  }
  if (queryForm.value.taskName) {
    _queryParam.query += "taskName=" + queryForm.value.taskName;
  }
  _queryParam.offset = (_queryParam.page - 1) * _queryParam.limit || 0;
  loading.value = true
  EsAjax.post(ApiUrls.taskList, _queryParam).then(res => {
    console.error('res===', res)
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    let { list, totalCount } = res.data.data
    if (list && list.length) {
      list.forEach(element => {
        element.status = `${element.status}`
      });
    }
    dataOfTable.value = list;
    paginationRef.value?.changeTotal({ totalCount: totalCount })
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}


onMounted(() => {
  loadData();
})

</script>
<style lang="less" scoped></style>
  
